<template>
    <div class="content-page">
        <div class="content-nav">
            <el-breadcrumb class="breadcrumb" separator="/">
                <el-breadcrumb-item :to="{ path: '/dashboard' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>数据管理</el-breadcrumb-item>
                <el-breadcrumb-item>分类数据</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="operation-nav">
                <el-button type="primary" icon="plus" @click="changeCategoryType">{{filterForm.isPetCategory ? '切换疾病分类': '切换宠物分类'}}</el-button>
            </div>
        </div>
        <div class="content-main">
            <div class="filter-box">
                <el-form :inline="true" :model="filterForm" class="demo-form-inline">
                    <el-form-item label="父级分类">
                        <el-input v-model="filterForm.parent_id" placeholder="请输入父级分类" clearable=""></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmitFilter">查询</el-button>
                    </el-form-item>
                    <el-form-item style="float: right;">
                        <el-button type="primary" @click="addCategory">{{filterForm.isPetCategory ? '增加宠物分类': '增加疾病分类'}}</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="form-table-box">
                <el-table :data="tableData" style="width: 100%" border stripe>
                    <el-table-column align="center" prop="id" label="分类ID" width="80">
                    </el-table-column>
                    <el-table-column align="center" prop="parent_id" label="父级ID" width="120">
                    </el-table-column>
                    <el-table-column align="center" prop="name" label="分类名称">
                    </el-table-column>
                    <el-table-column align="center" prop="type" label="类型" width="100">
                    </el-table-column>
                    <el-table-column align="center" prop="sort_order" label="排序值" width="100">
                    </el-table-column>
                    <el-table-column align="center" prop="is_show" label="是否显示" width="100">
                        <template slot-scope="scope">
                            <span >{{scope.row.is_show ? '是' : '否'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" fixed="right" label="操作" width="160">
                        <template slot-scope="scope">
                            <el-button size="small" type="primary" @click="handleRowEdit(scope.row)">编辑</el-button>
                            <el-button size="small" type="danger" @click="handleRowDelete(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="page-box">
                <el-pagination @current-change="handlePageChange" :current-page="page" :page-size="10" layout="total, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      page: 1,
      total: 0,
      filterForm: {
        parent_id: '',
        isPetCategory: true
      },
      tableData: []
    }
  },
  methods: {
    changeCategoryType () {
      this.filterForm.isPetCategory = !this.filterForm.isPetCategory
      this.getList()
    },
    handlePageChange (val) {
      this.page = val
      // 保存到localStorage
      localStorage.setItem('userPage', this.page)
      localStorage.setItem('userFilterForm', JSON.stringify(this.filterForm))
      this.getList()
    },
    handleRowEdit (row) {
      this.$router.push({ name: 'setting_category_add', query: {id: row.id, type: row.type} })
    },
    handleRowDelete (row) {
      this.$confirm('确定要删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$db.category.remove({id: row.id}, (err, count) => {
          if (err) console.error('kumeng: ' + err.stack)
          if (count) {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
          }
          this.getList()
        })
      })
    },
    addCategory () {
      this.$router.push({name: 'setting_category_add', query: {type: this.filterForm.isPetCategory ? 1 : 2}})
    },
    onSubmitFilter () {
      this.page = 1
      this.getList()
    },
    getList () {
      let query = {type: {$ne: this.filterForm.isPetCategory ? 2 : 1}}
      if (this.filterForm.parent_id !== '') query.parent_id = Number(this.filterForm.parent_id)
      this.$db.category.find(query).exec((err, docs) => {
        if (err) console.error('kumeng: ' + err.stack)
        this.total = docs.length
      })
      this.$db.category.find(query).skip(10 * this.page - 10).limit(10).exec((err, docs) => {
        if (err) console.error('kumeng: ' + err.stack)
        this.tableData = docs
      })
    }
  },
  components: {

  },
  mounted () {
    this.getList()
  },
  name: 'listDataPage'
}
</script>

<style scoped>

</style>
